<template>
  <el-dialog
    :title="title"
    :visible.sync="isVisible"
    :width="width"
    :before-close="handleClose"
    :lock-scroll="true"
    :close-on-click-modal="false"
    custom-class="pub_dialog"
    @open="getData"
  >
    <VForm
      ref="vformComponents"
      :form="formData.form"
      :options="formData.options"
      :rules="formData.rules"
      :labelWidth="formData.labelWidth"
      :rowspan="rowspan"
      @toLoadMethods="toLoadMethods"
      @changeGdArea="facilityIdDataChange"
    ></VForm>

    <div class="formTitle-root" v-show="showExamine">
      <div class="form-title-p">审核信息</div>
    </div>

    <VForm
      v-show="showExamine"
      ref="vformComponents1"
      :form="formData1.form"
      :options="formData1.options"
      :rules="formData1.rules"
      :labelWidth="formData1.labelWidth"
      :rowspan="rowspan"
    ></VForm>

    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="sure" v-if="openType!='detail'">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import { riskPlanDetail,
    riskPlanUpdate,
    riskPlanAdd } from '@/api/risk/plan'
  import { alarmFacilityList } from '@/api/alarm/facility'
  import VForm from "@/components/VForm/index";
  export default {
    components: {
      VForm,
    },
    props: {
      width: {
        type: String,
        default: "70%",
      },
      title: {
        type: String,
        default: "详情",
      },
      id:{},
      openType:{
        type:String,
        default:"add"
      },
      dialogVisible: {
        type: Boolean,
        default: false
      },
      largeType:{},
      riskPlanSuitTypeOptionsFormat:{}
    },
    watch: {
      'width': {
        handler(newVal, oldVal) {
          console.log('newVal===',newVal, oldVal)
          let w = this.width.split('%')[0]
          if(w>=60){
            this.rowspan = 2
          }else{
            this.rowspan = 1
          }
        },
        deep: true,
        immediate: true
      },
      'largeTypeOptions':{
        handler(newVal, oldVal) {
          this.formData.options.forEach(t=>{
            if(t.key=='largeType'){
              t.option.data = newVal
            }
          })
        },
        deep: true,
        immediate: true
      },
      'secretLevelOptions':{
        handler(newVal, oldVal) {
          this.formData.options.forEach(t=>{
            if(t.key=='secretLevel'){
              t.option.data = newVal
            }
          })
        },
        deep: true,
        immediate: true
      },
      'planLevelOptions':{
        handler(newVal, oldVal) {
          this.formData.options.forEach(t=>{
            if(t.key=='planLevel'){
              t.option.data = newVal
            }
          })
        },
        deep: true,
        immediate: true
      },
      'planFlagOptions':{
        handler(newVal, oldVal) {
          this.formData.options.forEach(t=>{
            if(t.key=='planFlag'){
              t.option.data = newVal
            }
          })
        },
        deep: true,
        immediate: true
      },
      'versionFlagOptions':{
        handler(newVal, oldVal) {
          this.formData.options.forEach(t=>{
            if(t.key=='versionFlag'){
              t.option.data = newVal
            }
          })
        },
        deep: true,
        immediate: true
      },
      'filingsStatusOptions':{
        handler(newVal, oldVal) {
          this.formData.options.forEach(t=>{
            if(t.key=='filingsStatus'){
              t.option.data = newVal
            }
          })
        },
        deep: true,
        immediate: true
      },
      'examineStatusOptions':{
        handler(newVal, oldVal) {
          this.formData1.options.forEach(t=>{
            if(t.key=='examineStatus'){
              t.option.data = newVal
            }
          })
        },
        deep: true,
        immediate: true
      },
      'riskPlanSuitTypeOptionsFormat':{
        handler(newVal, oldVal) {
          this.formData.options.forEach(t=>{
            if(t.key=='suitTypeSmall'){
              t.option.data = newVal
            }
          })
        },
        deep: true,
        immediate: true
      },
      'openType':{
        handler(newVal, oldVal) {
          let pathArray = this.$route.path.split("/")
          this.showExamine = pathArray[pathArray.length-1]!="ctrl"

          this.formData.options.forEach(t=>{
            t.disabled = newVal == 'detail' || this.showExamine
          })
          this.formData1.options.forEach(t=>{
            t.disabled = newVal == 'detail'
          })
        },
        deep: true,
        immediate: true
      },
      'formData.form.areaCode':{
        handler(newVal, oldVal) {
           console.log("formData.form.areaCode",newVal)
           // this.formData.form .facilityId = ''
           this.facilityDataList = []
           let params = this.getFacilityDataListParams(newVal, this.formData.form.suitTypeSmall)
           if(Object.keys(params).length!=0){
             this.getFacilityDataList(params)
           }
        },
        deep: true,
        immediate: true
      },
      'formData.form.suitTypeSmall':{
        handler(newVal, oldVal) {
          console.log("formData.form.suitTypeSmall",newVal)
          // this.formData.form .facilityId = ''
          this.facilityDataList = []
           let params = this.getFacilityDataListParams(this.formData.form.areaCode, newVal);
            if(Object.keys(params).length!=0){
              this.getFacilityDataList(params)
            }
        },
        deep: true,
        immediate: true
      },
      'facilityDataList':{
        handler(newVal, oldVal) {
          this.formData.options.forEach(t=>{
            if(t.key=='facilityId'){
              t.option.data = newVal
            }
          })
        },
        deep: true,
        immediate: true
      }
    },
    computed: {
      isVisible: {
        get() {
          return this.dialogVisible
        },
        set() {
          this.close()
        }
      }
    },
    data() {
      return {
        showExamine:false,
        rowspan:1,
        dict:{},
        formData1: {
          form: {
            examineBy:"",
            examineStatus:"",
            examineOption:"",
          },
          options: [
            {
              title: "审核人",
              key: "examineBy",
              type: "text",
            },
            {
              title: "审核状态",
              key: "examineStatus",
              type: "select",
              multiple:false,
              option: {
                data: this.examineStatusOptions,
                props: {
                  key: "id", // 指定key对应data的字段
                  label: "label", // 指定label对应data的字段
                  value: "value", // 指定value对应data的字段
                },
              },
            },
            {
              title: "审核意见",
              key: "examineOption",
              type: "textarea",
              columnWidth:'w100'
            },
          ],
          rules: {
            examineBy :[
              {max:36, message: '长度最大为36个字符', trigger: 'blur'}
            ],
            examineStatus :[
            ],
            examineOption :[
              {max:128, message: '长度最大为128个字符', trigger: 'blur'}
            ],
          },
          labelWidth: "140px",
        },
        formData: {
          form: {
            name:"",
            version:"",
            largeType:"",
            detailType:"",
            secretLevel:"",
            planLevel:"",
            releaseTime:"",
            startSuitTime:"",
            endSuitTime:"",
            drawRemark:"",
            drawUnit:"",
            drawUnitCode:"",
            releaseUnit:"",
            releaseUnitCode:"",
            planFlag:"",
            versionFlag:"",
            filingsStatus:"",
            contacts:"",
            contactsPhone:"",
            areaCode:"",
            file:[],
            suitTypeSmall:"",
            suitTypeLarge:"",
            facilityId:""
          },
          options: [
            {
              title: "预案名称",
              key: "name",
              type: "text",
            },
            {
              title: "预案版本",
              key: "version",
              type: "text",
            },
            {
              title: "预案大类",
              key: "largeType",
              type: "select",
              multiple:false,
              option: {
                data: this.largeTypeOptions,
                props: {
                  key: "id", // 指定key对应data的字段
                  label: "label", // 指定label对应data的字段
                  value: "name", // 指定value对应data的字段
                },
              },
              disabled:true
            },
            {
              title: "预案细类",
              key: "detailType",
              type: "text",
            },
            {
              title: "预案密级",
              key: "secretLevel",
              type: "select",
              multiple:false,
              option: {
                data: this.secretLevelOptions,
                props: {
                  key: "id", // 指定key对应data的字段
                  label: "label", // 指定label对应data的字段
                  value: "name", // 指定value对应data的字段
                },
              },
            },
            {
              title: "预案级别",
              key: "planLevel",
              type: "select",
              multiple:false,
              option: {
                data: this.planLevelOptions,
                props: {
                  key: "id", // 指定key对应data的字段
                  label: "label", // 指定label对应data的字段
                  value: "name", // 指定value对应data的字段
                },
              },
            },
            {
              title: "发布时间",
              key: "releaseTime",
              type: "date",
            },
            {
              title: "适用开始时间",
              key: "startSuitTime",
              type: "date",
            },
            {
              title: "适用结束时间",
              key: "endSuitTime",
              type: "date",
            },
            {
              title: "编制说明",
              key: "drawRemark",
              type: "text",
            },
            {
              title: "编制单位",
              key: "drawUnit",
              type: "text",
            },
            {
              title: "编制单位编码",
              key: "drawUnitCode",
              type: "text",
            },
            {
              title: "发布单位名称",
              key: "releaseUnit",
              type: "text",
            },
            {
              title: "发布单位编码",
              key: "releaseUnitCode",
              type: "text",
            },
            {
              title: "预案标志",
              key: "planFlag",
              type: "select",
              multiple:false,
              option: {
                data: this.planFlagOptions,
                props: {
                  key: "id", // 指定key对应data的字段
                  label: "label", // 指定label对应data的字段
                  value: "name", // 指定value对应data的字段
                },
              },
            },
            {
              title: "版本标志",
              key: "versionFlag",
              type: "select",
              multiple:false,
              option: {
                data: this.versionFlagOptions,
                props: {
                  key: "id", // 指定key对应data的字段
                  label: "label", // 指定label对应data的字段
                  value: "name", // 指定value对应data的字段
                },
              },
            },
            {
              title: "备案状态",
              key: "filingsStatus",
              type: "select",
              multiple:false,
              option: {
                data: this.filingsStatusOptions,
                props: {
                  key: "id", // 指定key对应data的字段
                  label: "label", // 指定label对应data的字段
                  value: "name", // 指定value对应data的字段
                },
              },
            },
            {
              title: "联系人",
              key: "contacts",
              type: "text",
            },
            {
              title: "联系电话",
              key: "contactsPhone",
              type: "text",
            },
            {
              title: "所属区域",
              key: "areaCode",
              type: "gdAreaSelect",
            },
            {
              title: "分类",
              key: "suitTypeSmall",
              type: "cascader",
              option: {
                data: this.riskPlanSuitTypeOptionsFormat,
                props: {
                  label: "label", // 指定label对应data的字段
                  value: "value", // 指定value对应data的字段
                },
              },
              event:'facilityIdDataChange'
            },
            {
              title: "所属设施",
              key: "facilityId",
              type: "select",
              multiple:false,
              option: {
                data: this.facilityDataList,
                props: {
                  key: "id", // 指定key对应data的字段
                  label: "name", // 指定label对应data的字段
                  value: "id", // 指定value对应data的字段
                },
              },
            },
            {
              title: "预案附件",
              key: "file",
              type: "file",
              fileType:"file",
              listType:"text",
              uploadTextTip:""
            },
          ],
          rules: {
            name :[
              { required: true, message: '请输入', trigger: 'blur' },
              {max:128, message: '长度最大为64个字符', trigger: 'blur'}
            ],
            version :[
              {max:32, message: '长度最大为32个字符', trigger: 'blur'}
            ],
            largeType :[
            ],
            detailType :[
              {max:16, message: '长度最大为16个字符', trigger: 'blur'}
            ],
            secretLevel :[
            ],
            planLevel :[
            ],
            releaseTime :[
            ],
            startSuitTime :[
            ],
            endSuitTime :[
            ],
            drawRemark :[
              {max:64, message: '长度最大为64个字符', trigger: 'blur'}
            ],
            drawUnit :[
              {max:64, message: '长度最大为64个字符', trigger: 'blur'}
            ],
            drawUnitCode :[
              {max:64, message: '长度最大为64个字符', trigger: 'blur'}
            ],
            releaseUnit :[
              {max:64, message: '长度最大为64个字符', trigger: 'blur'}
            ],
            releaseUnitCode :[
              {max:64, message: '长度最大为64个字符', trigger: 'blur'}
            ],
            planFlag :[
            ],
            versionFlag :[
            ],
            filingsStatus :[
            ],
            contacts :[
              {max:36, message: '长度最大为36个字符', trigger: 'blur'}
            ],
            contactsPhone :[
              {max:36, message: '长度最大为36个字符', trigger: 'blur'}
            ],
            file :[
            ],
          },
          labelWidth: "140px",
        },
        // 字典
        largeTypeOptions:[],
        secretLevelOptions:[],
        planLevelOptions:[],
        planFlagOptions:[],
        versionFlagOptions:[],
        filingsStatusOptions:[],
        examineStatusOptions:[],
        facilityDataList:[]
      };
    },
    methods: {
      toLoadMethods(methods) {
        this[methods]()
      },
      facilityIdDataChange(){
        this.$set(this.formData.form, 'facilityId', '')
      },
      getFacilityDataListParams(area, type){
        let params = {}
        if(area){
          for(let i=area.length-1; i>=0; i--){
              let code = area[i]
              if(code){
                // 最多截取6查询
                params["areaCodeFormat"] = code.substring(0, 2+2*i)
                break;
              }
          }
        }else {
          // 默认当前登录人员
          params["areaCodeFormat"] = this.$store.state.account.user.deptIds
        }
        if(type){
          // 获取对应设施modeType
          if(type[0]!=99){
              let item = this.riskPlanSuitTypeOptionsFormat.find(t=>t.value==type[0])
              if(undefined!=item){
                  let subItem = item.children.find(t=>t.value == type[1])
                  console.log("subItem",subItem,item)
                  if(undefined!=subItem){
                    params["modeType"] = subItem.alarmType
                  }
              }
          }
        }
        return params
      },
      getFacilityDataList(params){
        alarmFacilityList(params).then(res=>{
          if(res.code==200){
             this.facilityDataList = res.data
          }
        })
      },
      submitFormat(){
        this.formData.form.file = JSON.stringify(this.formData.form.file)
        if(this.formData.form.suitTypeSmall){
          this.formData.form.suitTypeLarge = this.formData.form.suitTypeSmall[0]
          this.formData.form.suitTypeSmall = this.formData.form.suitTypeSmall.toString()
        }
      },
      loadFormat(){
        this.formData.form.file  = this.formData.form.file ? JSON.parse(this.formData.form.file) : []
        if(this.formData.form.suitTypeSmall){
          this.formData.form.suitTypeSmall = this.formData.form.suitTypeSmall.split(",")
        }
      },
      getCheckBoxData(value,option,type){
        if(type=="submit"){
          if(value.length==0){
            return null
          }
          let temp = [];
          value.forEach(t=>{
            let item = option.find(x=> x.label == t)
            if(item!=undefined){
              temp.push(item.value)
            }
          })
          return temp.join(",")
        }else {
          if(!value){
            return []
          }else {
            let data = value.split(",")
            let temp = []
            data.forEach(t=>{
              let item = option.find(x=> x.value == t)
              if(item!=undefined){
                temp.push(item.label)
              }
            })
            return temp
          }
        }
      },
      sure(){
        console.log('sure===',this.formData.form)
        this.$refs.vformComponents.$refs.form.validate().then(res=>{
          if(this.formData.form.areaCode){
            let temp  = this.formData.form.areaCode
            this.formData.form.provinceCode = temp[0]
            this.formData.form.cityCode = temp[1]
            this.formData.form.countyCode = temp[2]
            this.formData.form.areaCode = temp[2]
          }
          this.submitFormat()
          if(this.openType == "add"){
            this.add()
          }else{
            this.update()
          }
        })
      },
      add(){
        this.formData.form.id = null
        let params = {
          ...this.formData.form,
          examineBy: this.formData1.form.examineBy,
          examineStatus: this.formData1.form.examineStatus,
          examineOption: this.formData1.form.examineOption
        }
        riskPlanAdd(params).then(res=>{
          if(res.code==200){
            this.$message({
              message: this.$t('tips.createSuccess'),
              type: 'success'
            })
            this.closeSuccess()
          }else{
            this.$message({
              message: this.$t('tips.systemException'),
              type: 'error'
            })
          }
        })
      },
      update(){
        delete this.formData.form.examineBy
        delete this.formData.form.examineStatus
        delete this.formData.form.examineOption
        let params = {
          ...this.formData.form,
          examineBy: this.formData1.form.examineBy,
          examineStatus: this.formData1.form.examineStatus,
          examineOption: this.formData1.form.examineOption
        }
        riskPlanUpdate(params).then(res=>{
          if(res.code==200){
            this.$message({
              message: this.$t('tips.updateSuccess'),
              type: 'success'
            })
            this.closeSuccess()
          }else{
            this.$message({
              message: this.$t('tips.systemException'),
              type: 'error'
            })
          }
        })
      },
      cancel(){
        this.close()
      },
      handleClose(done) {
        done()
        this.close()
      },
      closeSuccess(){
        this.$refs.vformComponents.$refs.form.resetFields();
        this.$refs.vformComponents1.$refs.form.resetFields();
        this.$emit('success')
      },
      close(){
        this.$refs.vformComponents.$refs.form.resetFields();
        this.$refs.vformComponents1.$refs.form.resetFields();
        this.$emit('close')
      },
      getData(){
        // let pathArray = this.$route.path.split("/")
        // let type = pathArray[pathArray.length-1]
        // this.showExamine = type!="ctrl"
        this.largeTypeOptions = []
        this.$commonJs.filterDataDict("riskPlanLargeType",this.largeTypeOptions )
        this.secretLevelOptions = []
        this.$commonJs.filterDataDict("riskPlanSecretLevel",this.secretLevelOptions)
        this.planLevelOptions = []
        this.$commonJs.filterDataDict("riskPlanLevel",this.planLevelOptions)
        this.planFlagOptions = []
        this.$commonJs.filterDataDict("riskPlanFlag",this.planFlagOptions)
        this.versionFlagOptions = []
        this.$commonJs.filterDataDict("riskPlanVersionFlag",this.versionFlagOptions)
        this.filingsStatusOptions = []
        this.$commonJs.filterDataDict("riskPlanFilingsStatus",this.filingsStatusOptions)
        this.examineStatusOptions = []
        this.$commonJs.filterDataDict("riskPlanExamineStatus",this.examineStatusOptions)
        if(this.openType!="add"){
          riskPlanDetail(this.id).then(res=>{
            if(res.code==200){
              this.formData.form = res.data
              this.loadFormat()
              if(res.data.provinceCode && res.data.cityCode && res.data.countyCode){
                this.formData.form.areaCode = [res.data.provinceCode,res.data.cityCode,res.data.countyCode]
              }
              this.formData1.form.examineBy = res.data.examineBy
              this.formData1.form.examineStatus = res.data.examineStatus
              this.formData1.form.examineOption = res.data.examineOption
            }else{
              this.$message({
                message: this.$t('tips.systemException'),
                type: 'error'
              })
            }
          })
        }else {
          this.formData.form.largeType = this.largeType
        }
      }
    },
  };
</script>

<style lang="scss" scoped>
  @import "@/styles/element-variables.scss";
  .formTitle-root{
    padding: 10px 0;
    border-bottom: 1px solid #EFEFEF;
    font-size: 16px;
    position: relative;
    margin-bottom: 5px;
    .form-title-p{
      padding-left: 10px;
      border-left: 4px solid $--color-primary;
    }
  }
</style>
